Convert Chain Selection DropdownMenu to Backend Networks #6344
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
walmat
changed the title
walmat
commented
Dec 17, 2024
src/components/DropdownMenu.tsx
Outdated
| @@ -75,6 +92,8 @@ export function DropdownMenu<T extends string>({ | |||
| side = 'right', | |||
| alignOffset = 5, | |||
| avoidCollisions = true, | |||
| hitSlop = 12, // TODO: Figure out how to make the trigger hit slop work | |||
| }, | ||
| [convertAssetAndNavigate] | ||
| ); | ||
| const handlePressContextMenu = useCallback((chainId: string) => convertAssetAndNavigate(+chainId), [convertAssetAndNavigate]); |
There was a problem hiding this comment.
maybe (not sure if good idea) we could make convertAssetAndNavigate take string and convert inside, to not need the useCallback
There was a problem hiding this comment.
ah actually just notice DropdownMenu is not memoed so the fn being stable or not does not make a difference, the useCallback is just overhead rn, don't think we can easily memo it since it takes children
| }, | ||
| })); | ||
|
|
||
| const MenuWrapper = availableChainIds.length > 1 ? ContextMenuButton : Box; | ||
| const Children = useMemo(() => { |
There was a problem hiding this comment.
children is memo maybe it works I never tested returning components from useMemo
| const backendNetworks = get().backendNetworks; | ||
| return backendNetworks.networks.reduce( | ||
| (acc, backendNetwork) => { | ||
| acc[parseInt(backendNetwork.id, 10)] = backendNetwork.icons.badgeURL; |
There was a problem hiding this comment.
I see we do this parseInt(x, 10) sporadically why is that? what's the second arg 10 for?
There was a problem hiding this comment.
you can call getChainsBadgeWorklet here
There was a problem hiding this comment.
That's true. I will probably do a cleanup PR to this file here soon but don't want to muddy it in this PR.
derHowie
pushed a commit
that referenced
this pull request
Jan 17, 2025
* start work on backend driven chain badge
* Update src/components/expanded-state/AvailableNetworksv2.tsx
* consolidate SwapCoinIcon into RainbowCoinIcon
* replace ChainBadge with ChainImage and consolidate + cleanup
* fix missing native asset icon URL from swaps
* more badge sizing fixes
* add migration and clearing of FastImage cache in dev section to fix mainnet sizing
* fix lint
* fix up swaps
* address more swaps nuances
* more sizing issues fixed
* remove size={40} from RainbowCoinIcon as it's default
* Convert Chain Selection DropdownMenu to Backend Networks (#6344)
* start work on converting existing chain selection dropdowns to Zeego
* available networks v2 convert
* add token icons to claim dropdown and fix but with AvailableNetworks not showing ever
* latest changes to try to get hitslop to work
* refactor trending tokens to remove SwapCoinIcon and fix APP-2217
* fix APP-2218
* chain badge sizing fix on sign transaction sheet
* remove debug layouts
* fixes
* remove hitslop prop and bake it into children
* remove hitslop prop from claimable menu
* port over Kane's work for dropdown menu
* fix instances of menu item being checkbox
* Fix most chain badge issues
* Remove unrelated change
* Update src/components/expanded-state/asset/ChartExpandedState.js
* fix radial gradient color issue + spacing fix
* Fix network switcher badges
* Remove unused RainbowCoinIcon styles
* Fix EthCard mainnet icon
* Fix MintSheet chain badge
* Fix GasSpeedButton legacy network chain badge
* fix ClaimCustomization badge invalid size and position
* Fix MintsSheet chain badges
* Fix L2Disclaimer network name casing
* fix transaction details row size change
* fix SignTransactionSheet size change
* fix WalletConnectApprovalSheet position relative
* revert animated coin icon changes
* revert changes
* revert collectible send row position change
* fix WalletConnectV2ListItem
* remove change to useWallets
* fix AddCash ProviderCard
* cleanup unused vars in ClaimCustomization
* fix two coin icons sizing and position on transaction details row
---------
Co-authored-by: Ibrahim Taveras <[email protected]>
Co-authored-by: Christian Baroni <[email protected]>
ibrahimtaveras00
added a commit
that referenced
this pull request
Jan 17, 2025
* start work on backend driven chain badge
* Update src/components/expanded-state/AvailableNetworksv2.tsx
* consolidate SwapCoinIcon into RainbowCoinIcon
* replace ChainBadge with ChainImage and consolidate + cleanup
* fix missing native asset icon URL from swaps
* more badge sizing fixes
* add migration and clearing of FastImage cache in dev section to fix mainnet sizing
* fix lint
* fix up swaps
* address more swaps nuances
* more sizing issues fixed
* remove size={40} from RainbowCoinIcon as it's default
* Convert Chain Selection DropdownMenu to Backend Networks (#6344)
* start work on converting existing chain selection dropdowns to Zeego
* available networks v2 convert
* add token icons to claim dropdown and fix but with AvailableNetworks not showing ever
* latest changes to try to get hitslop to work
* refactor trending tokens to remove SwapCoinIcon and fix APP-2217
* fix APP-2218
* chain badge sizing fix on sign transaction sheet
* remove debug layouts
* fixes
* remove hitslop prop and bake it into children
* remove hitslop prop from claimable menu
* port over Kane's work for dropdown menu
* fix instances of menu item being checkbox
* Fix most chain badge issues
* Remove unrelated change
* Update src/components/expanded-state/asset/ChartExpandedState.js
* fix radial gradient color issue + spacing fix
* Fix network switcher badges
* Remove unused RainbowCoinIcon styles
* Fix EthCard mainnet icon
* Fix MintSheet chain badge
* Fix GasSpeedButton legacy network chain badge
* fix ClaimCustomization badge invalid size and position
* Fix MintsSheet chain badges
* Fix L2Disclaimer network name casing
* fix transaction details row size change
* fix SignTransactionSheet size change
* fix WalletConnectApprovalSheet position relative
* revert animated coin icon changes
* revert changes
* revert collectible send row position change
* fix WalletConnectV2ListItem
* remove change to useWallets
* fix AddCash ProviderCard
* cleanup unused vars in ClaimCustomization
* fix two coin icons sizing and position on transaction details row
---------
Co-authored-by: Ibrahim Taveras <[email protected]>
Co-authored-by: Christian Baroni <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What changed (plus any additional context for devs)
Changes all context menus that are chain selectors to use Zeego. We now no longer rely on local ios/ assets to deliver the chain badges inside of those dropdowns and can rely on remote backend networks. These are located in three places
Work that's left to do
Screen recordings / screenshots
https://rainbowhaus.slack.com/archives/C0468CDBE75/p1734480680880539
What to test
need to test that functionally the chain selection in all these places remains unchanged.